<template>
  <ul class="category-list flex flex-wrap items-center gap-x-3 gap-y-3 mb-6">
    <li class="w-auto max-w-full"
      key="all">
      <common-link path="/"
        class="flex items-center h-9 text-sm border-0 bg-white px-3 duration-100 hover:bg-purple-1300 hover:text-white go-all-category">
        <span class="flex-1 truncate">{{$t('all')}}</span>&nbsp;<span class="flex-shrink-0">({{total}})</span>
      </common-link>
    </li>
    <template v-for="(item, key) in categoriesList">
      <li class="w-auto max-w-full"
        :key="key"
        v-if="key<12">
        <common-link v-if="($route.name==='lang-favorites' || $route.name==='favorites')"
          path="/favorites"
          :query='{ ...$route.query,category:item.handle }'
          class="flex items-center h-9 text-sm border-0 bg-white px-3 duration-100 hover:bg-purple-1300 hover:text-white go-favorites"
          :class="{'text-gray-1000': item.handle!==$route.params.handle,'bg-purple-1300': item.handle===$route.params.handle, 'text-white': item.handle===$route.params.handle, 'hover:opacity-90': item.handle===$route.params.handle}">
          <span class="flex-1 truncate">{{item.name}}</span>&nbsp;<span class="flex-shrink-0">({{item.tool_count}})</span>
        </common-link>

        <common-link v-else
          path="/category/:handle"
          :params='{handle:item.handle }'
          class="flex items-center h-9 text-sm border-0 bg-white px-3 duration-100 hover:bg-purple-1300 hover:text-white go-category"
          :class="{'text-gray-1000': item.handle!==$route.params.handle,'bg-purple-1300': item.handle===$route.params.handle, 'text-white': item.handle===$route.params.handle, 'hover:opacity-90': item.handle===$route.params.handle}">
          <span class="flex-1 truncate">{{item.name}}</span>&nbsp;<span class="flex-shrink-0">({{item.tool_count}})</span>
        </common-link>
      </li>
    </template>

    <li class="w-auto max-w-full"
      key="more"
      v-if="categoriesList && categoriesList.length > 0">
      <common-link path="/category"
        class="flex items-center h-9 text-sm border-0 bg-white px-3 duration-100 hover:bg-purple-1300 hover:text-white go-more-category">
        <span class="flex-1 truncate">{{$t('more')}}</span>
      </common-link>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Tools',
  props: {
    //是否有边框
    categoriesList: {
      type: Array,
      default: [],
    },
    //是否有边框
    total: {
      type: Number | null,
      default: 0,
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      isNotActive: ['border', 'text-gray-1000'],
      isActive: [
        'border-0',
        'bg-purple-1300',
        'text-white',
        'hover:opacity-90',
      ],
    }
  },
  methods: {
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.category-list {
  position: relative;
  box-sizing: border-box;
  line-height: normal;

  li {
    font-size: 0;
    a {
      border-radius: 18px;
    }
  }
}
</style>
